<template>
	<view class="message-item">
		<view class="top f-fc">
			<view class="tepy f-fc">
				<image :src="`/static/message/5.png`" class="icon" mode=""></image>
				{{ trType }}
			</view>
			<!-- <view class="tepy f-fc" v-else>
				<image :src="'/static/message/4.png'" class="icon" mode=""></image>
				通知消息
			</view> -->
			<view class="flex1"></view>
			<view class="time">{{ data.created_at }}</view>
		</view>
		<view class="title f-fc f-textOver">
			<view class="dot" v-if="!data.is_read"></view>
			<view class="flex1 title-text f-textOver">{{ data.title }}</view>
		</view>

		<view class="content f-textOver2">{{ data.content }}</view>
		<view class="bottom f-fc" @click="open">
			<view class="flex1">查看详情</view>
			<image :src="'/static/right.png'" class="right-icon" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	props: ['data'],
	computed: {
		trType() {
			switch (this.data.type) {
				case 1:
					return '预定成功';
				case 2:
					return '取消预约';
				case 3:
					return '行程开始';
				default:
					return '行程取消';
			}
		}
	},
	methods: {
		open() {
			this.$emit('onDetail');
		}
	}
};
</script>

<style lang="scss" scoped>
.message-item {
	margin-bottom: 20rpx;
	.top {
		height: 100rpx;
		border-bottom: solid #eee 2rpx;
		padding: 0 20rpx;
		margin-bottom: 32rpx;
		.tepy {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 30rpx;
			color: #151515;
			line-height: 44rpx;
			.icon {
				height: 48rpx;
				width: 48rpx;
				margin-right: 16rpx;
			}
		}
		.time {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
		}
	}

	.title {
		padding: 0 20rpx;
		margin-bottom: 14rpx;
		.dot {
			width: 12rpx;
			height: 12rpx;
			background: #fc4956;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.title-text {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: bold;
			font-size: 32rpx;
			color: #151515;
			line-height: 44rpx;
		}
	}
	.content {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 38rpx;
		margin-bottom: 32rpx;
		padding: 0 20rpx;
	}

	.bottom {
		height: 100rpx;
		border-top: 2rpx #eee solid;
		padding: 0 20rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 30rpx;
		color: #151515;

		line-height: 44rpx;
		.right-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}
}
</style>
